<template>
  <div class="discussion-container">
    <div class="discussion-list">
      <div class="discussion-item" v-for="(message, index) in messages" :key="index">
        <div class="user">{{ message.user }}</div>
        <div class="content">{{ message.content }}</div>
      </div>
    </div>
    <div class="discussion-form">
      <el-input
          type="textarea"
          v-model="newMessage"
          placeholder="请输入讨论内容"
      />
      <el-button type="primary" @click="postMessage">发布</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: [], // 存储讨论区的消息
      newMessage: '', // 用户输入的新消息
    };
  },
  methods: {
    postMessage() {
      if (this.newMessage.trim() === '') {
        // 如果输入为空，则不进行操作
        return;
      }
      // 将新消息添加到列表中
      this.messages.push({
        user: '用户' + Math.floor(Math.random() * 100), // 随机用户名
        content: this.newMessage,
      });
      // 清空输入框
      this.newMessage = '';
    },
  },
};
</script>

<style scoped>
.discussion-container {
  max-width: 600px;
  margin: 0 auto;
}

.discussion-list {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 20px;
}

.discussion-item {
  border-bottom: 1px solid #f0f0f0;
  padding: 10px 0;
}

.discussion-item:last-child {
  border-bottom: none;
}

.user {
  font-weight: bold;
  margin-bottom: 5px;
}

.content {
  font-size: 14px;
}

.discussion-form {
  display: flex;
  align-items: center;
  gap: 10px;
}

.el-textarea {
  flex-grow: 1;
}
</style>